import React from "react";

import { Outlet } from "react-router-dom";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import './addressbook.css'

export default function AddressBook() {
  const [color, setcolor] = useState(false);
  const navigate = useNavigate();
  
  useEffect(() => {
    navigate("/txl/mywork");
    setcolor(false);
  }, []);

  const Mywork = () => {
    navigate("/txl/mywork");
    setcolor(false);
  };

  const Myson = () => {
    navigate("/txl/three/xiao");
    setcolor(true);
  };

  return (
    <div>
      <div className="medical-header">
        <div className="medical-tab-container">
          <span
            className={`medical-tab ${!color ? 'active' : ''}`}
            onClick={Mywork}
          >
            我的工作室
          </span>
          <span
            className={`medical-tab ${color ? 'active' : ''}`}
            onClick={Myson}
          >
            我的患者
          </span>
        </div>
      </div>
      <div className="medical-content">
        <Outlet />
      </div>
    </div>
  );
}